<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新建内容输出单元 - 组件管理</title>
<link href="<?php echo W_BASE_URL;?>css/admin.css" rel="stylesheet" type="text/css" />
<script src="<?php echo W_BASE_URL;?>js/jquery.min.js"></script>
</head>
<body>
<div class="main-wrap">
	<div class="path"><span class="path-icon"></span>当前位置：<span>组件管理</span> &gt; <span>输出单元设置</span> &gt; <span>新建内容输出单元</span></div>
    <div class="set-wrap" style="overflow:visible;">
        <h4 class="main-title">新建内容输出单元</h4>
		<div class="set-area-int" style="overflow:visible;">
			<div class="export">
            	<div class="ex-content">
				<div class="content-r"><a class="pre-effect" href="#">预览单元效果<span class="tt1"><img class="hidden" src="<?php echo W_BASE_URL;?>css/admin/wb_show.png" width="285" height="354" /></span></a><a href="<?php echo URL('mgr/content_unit.add');?>">创建新单元</a></div>
                	<div class="content-l">
                    	<span class="w-show"></span>
                    	<h3>微博秀单元</h3>
                        <p>您可以通过该单元输出某个用户的微博内容</p>
                    </div>
                </div>
                <div class="ex-content re-ex-content">
				<div class="content-r"><a class="pre-effect" href="#">预览单元效果<span class="tt2"><img class="hidden" src="<?php echo W_BASE_URL;?>css/admin/wb_userlist.png" width="285" height="354" /></span></a><a href="<?php echo URL('mgr/content_unit.add', 'type=2');?>">创建新单元</a></div>
                    <div class="content-l">
                    	<span class="w-user"></span>
                    	<h3>用户列表单元</h3>
                        <p>您可以通过该单元输出一组推荐用户，包括用户的头像与昵称</p>
                    </div>
                </div>
                <div class="ex-content">
				<div class="content-r"><a class="pre-effect" href="#">预览单元效果<span class="tt3"><img class="hidden" src="<?php echo W_BASE_URL;?>css/admin/wb_topic.png" width="285" height="354" /></span></a><a href="<?php echo URL('mgr/content_unit.add', 'type=3');?>">创建新单元</a></div>
                    <div class="content-l">
                         <span  class="w-topic"></span>
                         <h3>话题微博单元</h3>
                         <p>您可以通过该单元输出与某个话题相关的微博</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="pop-float pop-pic hidden" id="previewLayer">
	<div class="pop-t"><div></div></div>
	<div class="pop-m">
		<div class="pop-inner">
			<img src="" width="296" height="337" />	
    	</div>
		<div class="pop-inner-bg"></div>
	</div>
	<div class="pop-b"><div></div></div>
	<div class="arrow"></div>
</div>

<script>
    (function(){
        var layer = $('#previewLayer');
        var arrow = layer.find('.arrow');
        var timer;
        var previewImg = layer.find('img');
        var isImgViewReady;
        
        function clearTimer(){
            if(timer){
                clearTimeout(timer);
                timer = false;
            }
        }
        
        function getPreviewPos(trig, anchor){
            var anchorXY = anchor.offset(),
                layerH   = layer.height(),
                anchorH  = anchor.height(),
                vph      = $(window).height(),
                newY     = anchorXY.top - Math.floor((layerH - anchorH)/2 - anchorH/2);
            if(newY+layerH>vph)
                newY = vph - layerH;
            if(newY<0)
                newY = 0;
            
            var trigX = trig.offset().left;
            var newX  = trigX - layer.width() - 5;
            arrow.css('top', Math.floor(anchorXY.top - newY + anchorH/2 + arrow.height()));
            return {left:newX, top:newY};        
        }
        
        function onTimer(){ layer.addClass('hidden'); }
        
        function preview(trig, anchor){
            trig = $(trig);
            anchor = $(anchor);
            clearTimer();
            
            previewImg[0].onload = (function(){
                layer.stop();
                var show = !layer.hasClass('hidden');
                if(show){
                    layer.animate(getPreviewPos(trig, anchor), 'fast');
                }else {
                    layer.css('visibility', 'hidden')
                         .removeClass('hidden')
                         .css(getPreviewPos(trig, anchor))
                         .css('visibility', '');
                }
            });
            
            var show = !layer.hasClass('hidden');
            if(show){
                var pos = getPreviewPos(trig, anchor);
                layer.css('left', pos.left);
                layer.animate({top:pos.top}, 'fast');
            }
            previewImg.attr('src', trig.find('img').attr('src'));
        }
        
        $('a.pre-effect').hover(
            function(){
                preview(this, $(this).closest('.ex-content'));
            }, 
            function(){
                if(timer)
                    clearTimer();
                timer = setTimeout(onTimer, 600);
            }
        );
    })();
</script>
</body>
</html>
